<!DOCTYPE HTML>
<html>
<body>

<video src="C:\Users\benjamin\Desktop\5661067ccb28250656500a25c6ac1b4c.mp4" controls="controls">
your browser does not support the video tag
</video>
 
<style>
    .ddd{
        animation: ani 1s  ;
    }
    @keyframes ani{
    from{
        transform: skewX(44deg) rotateX(0deg) ;
    }
    50%{
        transform: skewX(0deg) rotateX(90deg);;
    }
    to {
        transform: skewX(-44deg) rotateX(180deg);;
    }
}
</style>
    <div style="
    height: 4000px;
    background: linear-gradient(#fff,#3798e5,#d5a277,#7499d1,#c226b6,#7bd855,#000);
">
    
    <div style="
    width: 100px;
    background: red;
    height: 100px; ">
</div>

<div class="ddd" style="
    width: 100px;
    background: #ff00008a;
    height: 100px;
    border-top: 1px solid #ffffff;
    
    transform-origin: 0% 0%;"> 
</div> 
</div>
</body>
</html>
